<?php get_header(); ?>

  <?php 
    global $post;
    $location_nav = '';
    $i = 0;
  
    $myposts = get_posts("category=5&orderby=date&order=ASC");
    
    $pages = count($myposts);
    $scroller_width = $pages * 320; 
   
    foreach($myposts as $post) : $i++; $entry = get_object_vars($post);
      
      $e_id = $entry[ID];
      $e_title = $entry[post_title];
      $product_description = get_post_meta($entry[ID], "product_description", true);
      $files = get_children(array('post_parent' => $e_id,'post_status' => 'inherit','post_type' => 'attachment','post_mime_type' => 'image','order' => 'ASC','orderby' => 'menu_order'));
      
      if($files){
        $keys = array_keys($files);
        $num=$keys[0];
        $meta = wp_get_attachment_metadata($num);
        $thumb = wp_get_attachment_thumb_url($num);          
        $fullsize = wp_get_attachment_url($num);
      }

      $location_nav .=  '<li>';
      $location_nav .=  '<a href="<?php the_permalink(); ?>" title="<?php echo ($e_title) ?>">';
      $location_nav .=  '<div id="img_' . $i . '" class="thumbnails"><a class="" title="' . $e_title . '" href="' . $fullsize .'"><img src="' . $thumb. '" alt="" /></a></div>';


        
          <span class="location_title"><span class="location_id"><?php echo ($i) ?></span><?php echo ($e_title) ?></span>
          <img src="<?php echo ($thumb); ?>" alt="<?php echo ($e_title) ?>" width="50" height="50" />
          <p><?php echo get_post_meta($post->ID, "short_description", true); ?><span class="location_more_link">Learn More...</span></p>
          
        </a>
      </li>
    
    endforeach;
    
  ?>


<script type="text/javascript">
function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(55.1531, -6.669),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  setMarkers(map, locations);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var locations = [
  ['Giants Causeway', 55.24479, -6.50211, 7],
  ['Benone Beach - Tourist Complex', 55.16262, -6.86410, 6],
  ['Binevenagh AONB', 55.1216, -6.9119, 5],
  ['Carrick-a-Rede Rope', 55.23749, -6.35122, 4],
  ['Ballintoy Harbour', 55.24295, -6.36646, 3],
  ['Ballycastle', 55.2099, -6.2513, 2],
  ['Gortmore', 55.1012, -6.934, 1]
];

function setMarkers(map, locations) {
  var image = new google.maps.MarkerImage('http://google-maps-icons.googlecode.com/files/worldheritagesite.png',
      // This marker is 20 pixels wide by 32 pixels tall.
        new google.maps.Size(32.0, 37.0),
        new google.maps.Point(0, 0),
        new google.maps.Point(16.0, 18.0));
  var shadow = new google.maps.MarkerImage('/img/marker-shadow-01.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
        new google.maps.Size(51.0, 37.0),
        new google.maps.Point(0, 0),
        new google.maps.Point(16.0, 18.0));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 30, 30, 30, 30 , 1],
      type: 'poly'
  };
  
  var infoWindow = new google.maps.InfoWindow();

  google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
  });  
  
  for (var i = 0; i < locations.length; i++) {
    var location = locations[i];
    var myLatLng = new google.maps.LatLng(location[1], location[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: location[0],
        zIndex: location[3]
    });
    
    attachMarkerContent(marker, i, location[0]);
  }
  
  function attachMarkerContent(marker, number, locationTitle) {
    
    infoWindow.setContent(locationTitle);
    
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.open(map,marker);
    });
  }
  
}
</script>



<div id="map_canvas"></div>

<div id="location_nav">

<div id="location_nav_container" style="width:<?php echo $scroller_width ?>px">
  
  <ul>

  </ul>

</div>

</div> <!-- [END] #location_nav -->

<div id="scroller_nav">
  
  <div id="left_arrow">
    <img src="<?php bloginfo('stylesheet_directory'); ?>/img/left_arrow_01.png" alt="" />
  </div>
  
  <div id="right_arrow">
    <img src="<?php bloginfo('stylesheet_directory'); ?>/img/right_arrow_01.png" alt="" />
  </div>
  
</div>

<!--
<div id="breadcrumb">
  <div class="inside">      
    <?php
    if(function_exists('bcn_display'))
    {
    	bcn_display();
    }
    ?>
  </div>
</div>

<div id="primary">
  <div class="inside">
    
    <div id="content">

    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
          
            <h2 class="entry-title"><?php the_title(); ?></h2>
            <div class="entry-content">
            	<?php the_content(); ?>
            	<?php edit_post_link( __( 'Edit this entry', 'ccr' ), '<span class="edit-link">', '</span>' ); ?>
            </div><!-- .entry-content -->
        			
        </div><!-- #post-## -->
    
    <?php endwhile; ?>        
    
    </div> <!-- [END] #content -->
    
  </div>
</div> <!-- [END] #primary -->
<div class="clear"></div>

-->
    
<?php get_footer(); ?>